/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useRef, useState } from "react";
import { IFiles } from "../../typings";
import BabelCompiler from "../../Worker/BabelCompiler.ts?worker&inline";

interface IProps {
  files: IFiles;
}
function useCodeCompile(props: IProps) {
  const { files } = props;
  const compilerRef = useRef<Worker | null>(null);
  const [compiledCode, setCompiledCode] = useState<any>();

  // 初始化的时候创建一个编译器
  useEffect(() => {
    // 如果没有编译器，则创建
    if (!compilerRef.current) {
      // 创建编译器的实例
      compilerRef.current = new BabelCompiler();
      // 监听编译器解析后的结果
      compilerRef.current.addEventListener(
        "message",
        ({ data }: { data: any }) => {
          setCompiledCode(data);
        }
      );
    }
  }, [files]);

  // 文件改变的时候，重新编译
  useEffect(() => {
    compilerRef.current?.postMessage(files);
  }, [files]);

  return {
    compiledCode,
  };
}

export default useCodeCompile;
